<link type="text/css" rel="stylesheet" href="/css/default/mac/combo/combo.min.css" />
<script type="text/javascript" src="/js/mac/combo.min.js"></script>
<script type="text/javascript" src="/js/mac/grid_keyEvt.min.js"></script>
<script type="text/javascript" src="/js/mac/combo_autoCp.js"></script>
<style type="text/css">
.combo .tr { display: block; }
.grid .combo .body { margin-top: 24px; }
.grid .cell { border: 1px solid #CCC; overflow: hidden; height: 20px; }
.grid .cellTf { border: none; height: 20px; width: 100%; }
.grid .cellNf { text-align: right; }
</style>
<script type="text/javascript">
$(function(){
	var gd = $('.view');
	var dd = []; //data for combobox
	for(var i=1;i<=10; i++)
		dd.push({ code: i, name: 'Subject ' + i });
	var cols = [{
		field: 'no', title : 'Subject', width: 100,
		render: function(r, tr, vw){
			if(!tr.hasClass('selected'))
				return r['subject'];
			var a = $('<div class="combo"></div>');
			a.mac('combo', {
				height: 20,
				keyField: 'code',
				displayField: 'name',
				multiSelect: false,
				width: '100%',
				boxMinWidth: 200,
				boxTop: 0,
				boxLeft: 0,
				cols : [{
					field: 'code', width: '30%'
				},{
					field: 'name', width: '70%'
				}],
				data: dd
			}).attr('name', 'subject').select(r.no);
			a.mac('combo_autoCp');
			a.children('.head').find(':text').attr('tabIndex', 1);
			return a;
		}
	},{
		field: 'summary', title : 'Summary', width: 150, sizeable: false,
		render: function(r, tr, vw){
			var f = 'summary';
			if(!tr.hasClass('selected'))
				return r[f];
			var a = $('<input type="text" style="float: none"/>');
			a.attr('name', f).attr('tabIndex', 2).val(r[f]).width(70);
			var b = $('<input type="text" style="float: none" />');
			b.attr('tabIndex', 3).val('For test').width(70);
			return $('<div></div>').append(a).append(b);
		}
	},{
		field: 'test1', title : 'Test1', width: 128,
		render: function(r, tr, vw){
			return 'Hidden col behind me.';
		}
	},{
		field: 'test2', hidden: true, title : 'Test2', width: 80,
		render: function(r, tr, vw){
			return '<input type="text" tabIndex="4" />';
		}
	},{
		field: 'debit', title : 'Debit', width: 75, sort: true,
		render: function(r, tr, vw){
			var f = 'debit';
			if(!tr.hasClass('selected'))
				return '<div class="money">$' + r[f] + '</div>';
			var a = $('<input type="text" class="cellTf cellNf" />');
			a.attr('name', f).attr('tabIndex', 5).val(r[f]);
			return $('<div class="cell"></div>').append(a);
		}
	}];
	gd.reRenderRow = function(tr){
		var k = tr.attr('name');
		$.each(cols, function(n, c){
			if(c.render){
				var td = tr.find('.td[name=' + c.field + ']');
				td.empty().append(c.render(gd.data[k], tr, gd));
			}
		});
	}
	gd.mac('grid', {
		key: 'no',
		cols : cols,
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 10 },
			autoLoad: true
		},
		onRowClick: function(){
			var tr = $(this), sr = gd.selected;
			if(tr.hasClass('selected'))
				return true;
			if(sr)
				gd.reRenderRow(sr.removeClass('selected'));
			gd.selected = tr.addClass('selected');
			gd.reRenderRow(tr);
			return true;
		}
	});
	gd.mac('grid_keyEvt', {
		tabIndex: 1
	});
});
</script>
<div class="viewPort" style="height: 390px;">
	<div class="view grid"></div>
</div>